<template>
    <div>
      <el-page-header @back="back()" content="员工管理页面" style="margin-bottom: 10px;"/>
      <div class="unscramble">
        <el-input
          placeholder="请输入姓名/账号"
          prefix-icon="el-icon-search"
          @input="handleQuery"
          @change="$handleQuery"
          v-model="query"/>
        <el-table
        :data="employees.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        border
        max-height="55vh"
        height="55vh"
        >
          <el-table-column
          label="序号"
          type="index">
          </el-table-column>
          <el-table-column
          label="姓名"
          prop="name">
          </el-table-column>
          <el-table-column
            label="工号"
            prop="account">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-popconfirm
                title="确定删除此员工？"
                @onConfirm="delStaff(scope.row.account)"
                >
              <el-button
                slot="reference"
                type="danger">移除
              </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="employees.length">
        </el-pagination>
        <el-button type="primary" @click="addRow">新增</el-button>
        <el-dialog title="员工新建" :visible.sync="newEdit">
          <new-staff :success-call-back="loadEmployees">
          </new-staff>
        </el-dialog>
      </div>
    </div>
</template>

<script>
    import NewStaff from "./NewStaff";
    import {Employees,getEmployees,delByAccount,getEmployeesBySenior,findByQuery} from "../models/employee";

    export default {
        name: "Employees",
      components: {NewStaff},
      data() {
        return {
          currentPage:1, //初始页
          pagesize:10,    //    每页的数据
          employees: [],
          newEdit:false,
          query:'',
          handleQuery:this._func.debounce(this.$handleQuery,2000,false)
        }
      },
      mounted() {
          this.loadEmployees();
      },
      methods:{
        //模糊查询
        $handleQuery(){
          findByQuery(this.query).then(success=>{
            this.employees=success.data;
          },failed=>{
            this.$message({
              type:'error',
              message:'查询失败',
            })
          })
        },
          back(){
            this.$router.back();
          },
          //员工信息编辑
        edit(index){
          console.log(JSON.stringify(index))
          this.$confirm('是否继续编辑员工信息','提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
          }).then(()=>{
            /******前端权限验证*******/
            //TODO
            /******后端权限验证*******/
            //updateEmployee()
            /******验证通过*******/
            //todo
          }).catch(()=>{
            this.$message({
              type:'info',
              message:'已取消编辑'
            })
          })
        },
        //员工新建
        addRow(){
          let staff=Employees.createNew()
          this.newEdit=true;
        },
        //加载员工列表
        async loadEmployees() {
          this.newEdit=false;
          if(this.$store.state.staff.isOnline){
            this.employees = await getEmployeesBySenior(this.$store.state.staff.account);
          }else{
            this.employees= await getEmployees();
          }

        },
        delStaff(account){
            console.log('del')
          delByAccount(account).then(resp=>{
            this.$message({
              type:'success',
              message:'删除成功'
            });
            this.loadEmployees();
          })
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
          this.pagesize = size;
        },
        handleCurrentChange: function(currentPage){
          this.currentPage = currentPage;
        },
      }
    }
</script>

<style scoped>

</style>
